<template>
    <el-form ref="personFormRef" :model="ruleForm" status-icon :rules="rules" label-width="100px" label-position="left"
        class="demo-ruleForm">
        <el-form-item label="用户名：" prop="adminname">
            <el-input v-model="ruleForm.adminname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" />
        </el-form-item>

        <el-form-item label="角色：" prop="role">
            <el-select v-model="ruleForm.role" placeholder="请选择添加的角色">
                <el-option v-for="item in role" :key="item.value" v-bind="item" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="权限：">
            <el-tree :data="data" show-checkbox node-key="id" :default-checked-keys="[1]" @check="fn" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="addPersonForm(personFormRef)">新增管理员</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import { IPerson } from '../../mytype';
import service from '@/utils/service';
import { ElNotification } from 'element-plus'
import { role, data } from '@/mydata/data';

const emit = defineEmits()
const personFormRef = ref<FormInstance>()

const ruleForm = reactive<IPerson>({
    adminname: '',
    password: '',
    authority: []
})

let checkedKeys = []

const rules = reactive<FormRules>({
    adminname: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    role: [{ required: true, message: '请选择添加的角色', trigger: 'change', }],
    authority: [{
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
    }],

})

const fn = (arg1: any, arg2: any) => {
    checkedKeys = arg2.checkedKeys
}

// 添加管理员
const addPersonForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid: any) => {
        if (valid) {
            ruleForm.checkedKeys = checkedKeys
            service({
                url: "/admin/admin/add",
                method: "post",
                data: {
                    adminname: ruleForm.adminname,
                    password: ruleForm.password,
                    role: ruleForm.role,
                    checkedKeys: ruleForm.checkedKeys
                }
            }).then((res: any) => {
                if (res.data.code === '200') {
                    ElNotification({
                        message: '添加管理员成功！',
                        type: 'success',
                    })
                    emit('ok')
                } else if (res.data.code === '10004') {
                    ElNotification({
                        message: '管理员已存在，请勿重复添加！',
                        type: 'error',
                    })
                }
            })

        } else {
            console.log('error submit!')
            return false
        }
    })
}
</script>

<style scoped>
.el-input {
    width: 300px;
}

.el-select {
    width: 300px;
}
</style>